<template>
  <div>
    <div class="background">
        <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div>
    <!-- 注册页 -->
    <div id="div1">
      <el-form :model="ruleForm" status-icon :rules="rules" 
      ref="ruleForm" label-width="100px" class="login-form">
      <!-- 用户头像 -->
      
      
      
      <el-form-item label="姓名" prop="adminname">
          <el-input type="name" v-model="ruleForm.adminname"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input type="email" v-model="ruleForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-input type="phone" v-model="ruleForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        
         <el-form-item label="上传头像">
          <el-upload
          action="http://localhost:8086/uploadimg"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="uploadOk">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
            </el-form-item>

          <el-button type="primary" round @click="register('ruleForm')" class="submitBtn">注册</el-button>
          <el-button type="success" round @click="resetForm('ruleForm')" class="submitBtn">重置</el-button>
        
      </el-form>
    </div>
    
  
  </div>
</template>
<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      imgSrc: require(".././assets/2.jpg"),
      ruleForm: {
        adminname: "",
        password: "",
        checkPass: "",
        email: "",
        phone: "",
        img: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    uploadOk(response,file,fileList){
        console.log(response);
        this.ruleForm.img = response.data;
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
    handlePictureCardPreview(file) {
         
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    register(formName) {
      this.$axios
      .post('/register',{
          'adminname':this.ruleForm.adminname,
          'password':this.ruleForm.password,
          'email':this.ruleForm.email,
          'phone':this.ruleForm.phone,
          'img':this.ruleForm.img
      })
      .then(res=>{
        if(res.data.code == 200){
          this.$message({
                message:'注册成功',
                type:'success'
              });
              this.$router.push("/");
        }else{
           this.$message({
                message:'注册失败',
                type:'error'
              });
        }
      })
      .catch(error=>{
        console.log(error);
      })
    },
    resetForm(formName) {
       this.$refs.ruleForm.resetFields();  
    },
  },
};
</script>

<style scoped>
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: absolute;
}
#div1 {
  position: absolute; /*--絕對定位--*/
  top: 10%;
  left: 36%;
}
.login-form {
  margin: 20px auto;
  width: 500px;
  background: #ddab72e7;
  box-shadow: 0 0 35px #b4bccc;
  padding: 30px 30px 0 30px;
  border-radius: 25px;
}
.submitBtn {
  width: 45%;
}
.to {
  color: #67c23a;
  cursor: pointer;
}
</style>